<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="编号">
                        <el-input v-model="drugMoneyParam.ppNo" placeholder="编号"></el-input>
                    </el-form-item>

                    <el-form-item label="病人姓名">
                        <el-input v-model="drugMoneyParam.patientName" placeholder="病人姓名"></el-input>

                    </el-form-item>
                    <el-form-item label="申请医生">
                        <el-input v-model="drugMoneyParam.docName" placeholder="申请医生"></el-input>

                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="queryCondition">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="del">清空条件</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <!-- 放幻灯片 -->
            <el-col :span="24">


                <el-table :data="tableData" style="width: 100%">


                    <el-table-column prop="ppNo" label="申请编号" width="180">
                    </el-table-column>
                    <el-table-column prop="patientName" label="病人姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="docName" label="开药医生"> </el-table-column>
                    <el-table-column prop="totalPrice" label="总价格">

                    </el-table-column>
                    <el-table-column label="药品">
                        <template slot-scope="scope">

                            <el-button type="primary" @click="look(scope.row)">查看药品</el-button>

                        </template>

                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" @click="payMent(scope.row)">缴费</el-button>

                        </template>

                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24"> </el-col>
        </el-row>
        <el-row>
            <el-col :span="24"> </el-col>
        </el-row>

        <!-- label-width相当于label所占的宽度 -->
        <el-dialog title="查看药品" :visible.sync="dialogFormVisible">
            <el-table :data="tableDataDrug" style="width: 100%">


                <el-table-column prop="drugName" label="药品名称" width="180">
                </el-table-column>
                <el-table-column prop="price" label="单价" width="180">
                </el-table-column>
                <el-table-column prop="buyCount" label="数量"> </el-table-column>
                

            </el-table>
            <!-- <el-row class="data-row">  
      <el-col :span="8" class="data-col">  
        <div class="label">药品名称</div>  
        <el-tag class="data-tag">{{ tableDataDrug.drugName }}</el-tag>  
      </el-col>  
      <el-col :span="8" class="data-col">  
        <div class="label">价格</div>  
        <el-tag class="data-tag">{{ tableDataDrug.price }}</el-tag>  
      </el-col>  
      <el-col :span="8" class="data-col">  
        <div class="label">购买数量</div>  
        <el-tag class="data-tag">{{ tableDataDrug.buyCount }}</el-tag>  
      </el-col>  
      添加更多列来展示数据  
    </el-row>   -->
            
        </el-dialog>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :page-sizes="[4, 10, 20, 50]" :page-size="pageSize" :current-page="pageNum"
                    @next-click="nextPage" @prev-click="prevPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" layout=" total,sizes,prev, pager, next" :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageNum: "1",
            pageSize: "4",
            total: 0,
            tableData: [],
            imgsrc: "", //图片在服务器中的地址
            dialogFormVisible: false,
            provider: "",
            price: "",
            createTime: "",
            drugMoneyParam: {
                ppNo: "",
                patientName: "",
                docName: ""
            },
            tableDataDrug:[],




            name: "",
            typeId: "",
        };
    },
    methods: {

        prevPage(val) {
            this.pageNum = val;
            this.queryDrugMoney();
        },
        nextPage(val) {
            //点击下一页触发

            this.pageNum = val;
            this.queryDrugMoney();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryDrugMoney();
        },
        handleSizeChange(val) {
            //改变每页条数触发
            this.pageNum = 1;
            this.pageSize = val;
            this.queryDrugMoney();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.queryDrugMoney();
        },
        payMent(row){
            
            let ppNo=row.ppNo;
            let idd=row.idd;
           
            window.open("http://localhost:8092/alipay/drug?ppNo="+idd);
            let param={}
            param.ppNo=ppNo
            param.id=row.idd
            this.$axios.post('api/alipay/drug',param)
            .then(res=>{
                 if(res.data.code==200){
                     this.$message({
                         message: '缴费成功',
                         type:'success'
                     });
                 }else{
                     this.$message({
                         message: '缴费失败',
                         type: 'error'
                     });
                 }
               

            })
        
        },
        del(){
            this.drugMoneyParam.ppNo="";
            this.drugMoneyParam.patientName="";
            this.drugMoneyParam.docName="";
            this.pageNum=1;
            this.queryDrugMoney();
        },
        queryDrugMoney() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.drugMoneyParam;
            this.$axios.post("api/drugMoney/queryAll", pageParam).then((res) => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.tableData = res.data.data.list;
                    this.pageNum = res.data.data.pageNum;
                    this.pageSize = res.data.data.pageSize;
                    this.total = res.data.data.total;
                    console.log(this.tableData);
                }
            });
        },
        look(row) {
            this.tableDataDrug=[];
           
            
            this.dialogFormVisible = true;
            this.tableDataDrug.push(row);  

        }
        //回显有两种方式 res上传接口的返回值，file上传的文件
        //1url.createobjecturl(file)

    },
    created() {
        this.queryDrugMoney();
    },
};
</script>

<style scoped></style>